<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <div style="display:flex;align-items: center;">
        <a-switch :checked="this.showErr" @change="handleErrShow" style="margin-right:10px" /> 只显示异常
      </div>
      <a-table :columns="columns" :data-source="data" :loading="loading" :pagination='pagination' @change="handleTableChange" style="margin-top: 10px;">
        <span slot="subOrders">...</span>
        <span slot="remark">...</span>
        <p slot="expandedRowRender" slot-scope="record" style="width:900px">
          分账明细：{{record.subOrders}}
          <br>
          备注：{{ record.remark }}
        </p>
      </a-table>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { payLogList } from "@/request/api";
export default {
  data() {
    return {
      loading: false,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "日志管理", path: "", query: {} },
        { name: "支付日志", path: "/payloglist", query: {} },
      ],
      columns: [
        // {
        //   title: "ID",
        //   dataIndex: "id",
        //   key: "id",
        // },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 120,
        },
        {
          title: "支付ID",
          dataIndex: "payId",
          key: "payId",
        },
        {
          title: "分账明细",
          dataIndex: "subOrders",
          key: "subOrders",
          width: 120,
          slots: { title: "分账明细" },
          scopedSlots: { customRender: "subOrders" },
        },
        {
          title: "通知交易流水号",
          dataIndex: "seqId",
          key: "seqId",
          width: 200,
        },
        {
          title: "实收金额",
          dataIndex: "receiptAmount",
          key: "receiptAmount",
          width: 90,
        },
        {
          title: "分账ID",
          dataIndex: "fenId",
          key: "fenId",
        },
        {
          title: "平台分账金额",
          dataIndex: "plantAmt",
          key: "plantAmt",
          width: 200,
        },

        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          slots: { title: "备注" },
          scopedSlots: { customRender: "remark" },
        },
      ],
      pagination:{current:1,size:10},
      data: [],
      showErr:false
    };
  },
  components: {
    Hreadcrumb,
  },
  created() {
    this.payLogList(1,10);
  },
  methods: {
    async payLogList(p,ps) {
      this.loading = true;
      console.log(p,ps)
      
      let params = 'p='+(p-1)+'&ps='+ps + '&showErr='+this.showErr
      let { data } = await payLogList(params);
      console.log(data);
      if (data.success) {
        this.loading = false;
        data.content.records.length > 0
          ? data.content.records.map((item) => {
              if (item.remark != null) {
                item.remark = eval("("+item.remark+")");
              }
              if (item.subOrders != null) {
                item.subOrders = eval("("+item.subOrders+")");
              }
            })
          : null;

        let pagination = {...this.pagination}
        pagination.total = data.content.total
        console.log(pagination)
        this.pagination = pagination
        this.data = data.content.records;
      } else {
        this.loading = false;
        this.data = [];
      }
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.payLogList(pager.current,pager.size);
    },
    handleErrShow(checked){
      console.log(checked)
      this.showErr = checked
      this.payLogList(1,10);
    }
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
}
</style>